import React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  itemOverlay: {
    overflow: "visible",
  },
  errmsg: {
    color: "#C55252",
    margin: "0 10px 10px 10px",
  },
});

export default function Overlay({
  errmsg,
  children,
}: {
  errmsg?: string;
  children: React.ReactChild;
}) {
  const classes = useStyles();
  return (
    <div className={classes.itemOverlay} onClick={(e) => e.stopPropagation()}>
      {children}
      {errmsg && <div className={classes.errmsg}>{errmsg}</div>}
    </div>
  );
}
